import React, { useState } from 'react';
import * as echarts from 'echarts';

interface PredictionOption {
  id: number;
  content: string;
}

interface EventForm {
  name: string;
  type: string;
  date: string;
  time: string;
  predictionOptions: PredictionOption[];
  rewardType: 'points' | 'cash';
  rewardAmount: string;
}
export default function Create() {
    const [form, setForm] = useState<EventForm>({
        name: '',
        type: '',
        date: '',
        time: '',
        predictionOptions: [
        { id: 1, content: '' },
        { id: 2, content: '' },
        ],
        rewardType: 'points',
        rewardAmount: '',
    });

    const handleAddOption = () => {
        const newOption = {
        id: form.predictionOptions.length + 1,
            content: '',
        };
        setForm({
            ...form,
            predictionOptions: [...form.predictionOptions, newOption],
        });
    };

    const handleRemoveOption = (id: number) => {
        setForm({
                ...form,
                predictionOptions: form.predictionOptions.filter((option) => option.id !== id
            ),
        });
    };

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        console.log('提交表单:', form);
    };
    return (
        <div className="min-h-screen bg-gray-50">
            {/* 顶部导航 */}
            <nav className="bg-white shadow-md h-16 flex items-center px-8 fixed w-full top-0 z-50">
            <div className="flex items-center justify-between w-full max-w-7xl mx-auto">
                <h1 className="text-xl font-semibold text-gray-800">创建赛事</h1>
                <button className="text-gray-600 hover:text-gray-800 !rounded-button whitespace-nowrap">
                <i className="fas fa-arrow-left mr-2"></i>
                返回
                </button>
            </div>
            </nav>

            {/* 主要内容区域 */}
            <div className="pt-24 pb-32 px-8">
            <div className="max-w-3xl mx-auto bg-white rounded-lg shadow-lg p-8">
                <form onSubmit={handleSubmit}>
                {/* 赛事名称 */}
                <div className="mb-6">
                    <label className="block text-gray-700 text-sm font-medium mb-2">
                    赛事名称
                    </label>
                    <input
                    type="text"
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
                    placeholder="请输入赛事名称"
                    value={form.name}
                    onChange={(e) => setForm({ ...form, name: e.target.value })}
                    />
                </div>

                {/* 赛事类型 */}
                <div className="mb-6">
                    <label className="block text-gray-700 text-sm font-medium mb-2">
                    赛事类型
                    </label>
                    <div className="relative">
                    <button
                        type="button"
                        className="w-full px-4 py-2 text-left border border-gray-300 rounded-lg bg-white text-sm flex items-center justify-between !rounded-button whitespace-nowrap"
                    >
                        {form.type || '请选择赛事类型'}
                        <i className="fas fa-chevron-down text-gray-400"></i>
                    </button>
                    </div>
                </div>

                {/* 赛事时间 */}
                <div className="mb-6 grid grid-cols-2 gap-4">
                    <div>
                    <label className="block text-gray-700 text-sm font-medium mb-2">
                        日期
                    </label>
                    <input
                        type="date"
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
                        value={form.date}
                        onChange={(e) => setForm({ ...form, date: e.target.value })}
                    />
                    </div>
                    <div>
                    <label className="block text-gray-700 text-sm font-medium mb-2">
                        时间
                    </label>
                    <input
                        type="time"
                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
                        value={form.time}
                        onChange={(e) => setForm({ ...form, time: e.target.value })}
                    />
                    </div>
                </div>

                {/* 预测选项 */}
                <div className="mb-6">
                    <div className="flex items-center justify-between mb-2">
                    <label className="block text-gray-700 text-sm font-medium">
                        预测选项
                    </label>
                    <button
                        type="button"
                        onClick={handleAddOption}
                        className="text-blue-600 hover:text-blue-700 !rounded-button whitespace-nowrap"
                    >
                        <i className="fas fa-plus mr-1"></i>
                        添加选项
                    </button>
                    </div>
                    <div className="space-y-3">
                    {form.predictionOptions.map((option) => (
                        <div key={option.id} className="flex items-center gap-2">
                        <input
                            type="text"
                            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
                            placeholder="请输入预测选项"
                            value={option.content}
                            onChange={(e) => {
                            const newOptions = form.predictionOptions.map((opt) =>
                                opt.id === option.id
                                ? { ...opt, content: e.target.value }
                                : opt
                            );
                            setForm({ ...form, predictionOptions: newOptions });
                            }}
                        />
                        <button
                            type="button"
                            onClick={() => handleRemoveOption(option.id)}
                            className="text-red-500 hover:text-red-600 p-2 !rounded-button whitespace-nowrap"
                        >
                            <i className="fas fa-trash-alt"></i>
                        </button>
                        </div>
                    ))}
                    </div>
                </div>

                {/* 奖励设置 */}
                <div className="mb-6">
                    <label className="block text-gray-700 text-sm font-medium mb-2">
                    奖励设置
                    </label>
                    <div className="grid grid-cols-2 gap-4">
                    <div className="flex items-center space-x-4">
                        <label className="inline-flex items-center">
                        <input
                            type="radio"
                            className="form-radio text-blue-600"
                            checked={form.rewardType === 'points'}
                            onChange={() => setForm({ ...form, rewardType: 'points' })}
                        />
                        <span className="ml-2 text-sm text-gray-700">积分奖励</span>
                        </label>
                        <label className="inline-flex items-center">
                        <input
                            type="radio"
                            className="form-radio text-blue-600"
                            checked={form.rewardType === 'cash'}
                            onChange={() => setForm({ ...form, rewardType: 'cash' })}
                        />
                        <span className="ml-2 text-sm text-gray-700">现金奖励</span>
                        </label>
                    </div>
                    <input
                        type="text"
                        className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
                        placeholder={`请输入${form.rewardType === 'points' ? '积分' : '现金'}数量`}
                        value={form.rewardAmount}
                        onChange={(e) => setForm({ ...form, rewardAmount: e.target.value })}
                    />
                    </div>
                </div>
                </form>
            </div>
            </div>

            {/* 底部固定按钮 */}
            <div className="fixed bottom-0 left-0 right-0 bg-white shadow-lg px-8 py-4">
            <div className="max-w-3xl mx-auto flex justify-end space-x-4">
                <button
                type="button"
                className="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm !rounded-button whitespace-nowrap"
                >
                取消
                </button>
                <button
                type="submit"
                className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm !rounded-button whitespace-nowrap"
                >
                提交
                </button>
            </div>
            </div>
        </div>
  );
}